---
title: crwdns61382:0crwdne61382:0
image: crwdns61384:0crwdne61384:0
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

## crwdns61386:0crwdne61386:0

crwdns61388:0crwdne61388:0

<Tabs>
<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| crwdns61390:0crwdne61390:0 | crwdns61392:0crwdne61392:0 | crwdns61394:0crwdne61394:0 |
| ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
| crwdns61396:0crwdne61396:0 | crwdns61398:0crwdne61398:0 | crwdns61400:0crwdne61400:0 |
| crwdns61404:0crwdne61404:0 | crwdns61406:0crwdne61406:0 | crwdns61408:0crwdne61408:0 |
| crwdns61410:0crwdne61410:0 | crwdns61414:0crwdne61414:0 | crwdns61418:0crwdne61418:0 |
| crwdns61422:0crwdne61422:0 | crwdns61426:0crwdne61426:0 | crwdns61430:0crwdne61430:0 |

</Tab>

</Tabs>

## crwdns61436:0crwdne61436:0

crwdns61440:0crwdne61440:0

<Tabs>
<Tab title="Usage">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```

</Tab>
<Tab title="Props">

| crwdns61444:0crwdne61444:0 | crwdns61448:0crwdne61448:0 | crwdns61452:0crwdne61452:0 |
| ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
| crwdns61456:0crwdne61456:0 | crwdns61462:0crwdne61462:0 | crwdns61466:0crwdne61466:0 |
| crwdns61470:0crwdne61470:0 | crwdns61474:0crwdne61474:0 | crwdns61478:0crwdne61478:0 |
| crwdns61482:0crwdne61482:0 | crwdns61488:0crwdne61488:0 | crwdns61492:0crwdne61492:0 |
| crwdns61496:0crwdne61496:0 | crwdns61500:0crwdne61500:0 | crwdns61504:0crwdne61504:0 |

</Tab>
</Tabs>

## crwdns61510:0crwdne61510:0

crwdns61514:0crwdne61514:0

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| crwdns61518:0crwdne61518:0 | crwdns61522:0crwdne61522:0 | crwdns61526:0crwdne61526:0 |
| ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
| crwdns61532:0crwdne61532:0 | crwdns61536:0crwdne61536:0 | crwdns61540:0crwdne61540:0 |
| crwdns61544:0crwdne61544:0 | crwdns61548:0crwdne61548:0 | crwdns61552:0crwdne61552:0 |
| crwdns61556:0crwdne61556:0 | crwdns61562:0crwdne61562:0 | crwdns61566:0crwdne61566:0 |

</Tab>
</Tabs>

## crwdns61570:0crwdne61570:0

crwdns61574:0crwdne61574:0

<Tabs>
<Tab title="Usage">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| crwdns61580:0crwdne61580:0 | crwdns61584:0crwdne61584:0 | crwdns61588:0crwdne61588:0                                                            |
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| crwdns61594:0crwdne61594:0 | crwdns61598:0crwdne61598:0 | crwdns61602:0crwdne61602:0                                                            |
| crwdns61606:0crwdne61606:0 | crwdns61610:0crwdne61610:0 | crwdns61614:0crwdne61614:0                                                            |
| crwdns61620:0crwdne61620:0 | crwdns61624:0crwdne61624:0 | crwdns61628:0crwdne61628:0 crwdns61632:0crwdne61632:0 |
| crwdns61636:0crwdne61636:0 | crwdns61640:0crwdne61640:0 | crwdns61644:0crwdne61644:0                                                            |

</Tab>
</Tabs>
